    <template>
    <div class="container">
        <statistics-header header-title="确 诊 和 无 症 状 人 员 数 据 库"></statistics-header>
        <statistics-bar bar-type="confirmedAsymptomatic"  @getType="getType" ></statistics-bar>
        <div class="report-content">
            <div class="search-group">
<!--                <div class="left-content">-->
<!--                    <div class="data-title">数据库信息</div>-->
<!--                    <dlq-search @search="search"></dlq-search>-->
<!--                </div>-->
<!--                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
            </div>
            <Row class="main-table">
                <Col span="12">
                    <div class="item">
                        <div id="chart1" class="chart-item"></div>
                    </div>
                </Col>
                <Col span="12">
                    <div class="item">
                        <div id="chart2" class="chart-item"></div>
                    </div>
                </Col>
            </Row>
            <br>
<!--            <Row type="flex" justify="center">-->
<!--                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"-->
<!--                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>-->
<!--            </Row>-->
        </div>
    </div>
</template>
<script>
import {
  getAsymptomaticCountList
} from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import StatisticsBar from '@/components/statistics-bar'
// import DlqSearch from '@/components/search'
import echarts from 'echarts'
export default {
  components: {
    StatisticsBar,
    StatisticsHeader
    // DlqSearch
  },
  data () {
    return {
      totalnum: 0,
      typeNumObj: [
      ],
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableData: [],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      }
    }
  },
  computed: {},
  mounted () {
    this.init()
    // this.chart1()
    // this.chart2()
  },
  methods: {
    chart1 (chart1List1, chart1List2, chart1List3) {
      let myChart = echarts.init(document.getElementById('chart1'))
      // 指定图表的配置项和数据

      // let posList = [
      //   'left', 'right', 'top', 'bottom',
      //   'inside',
      //   'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
      //   'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      // ]
      //
      // app.configParameters = {
      //   rotate: {
      //     min: -90,
      //     max: 90
      //   },
      //   align: {
      //     options: {
      //       left: 'left',
      //       center: 'center',
      //       right: 'right'
      //     }
      //   },
      //   verticalAlign: {
      //     options: {
      //       top: 'top',
      //       middle: 'middle',
      //       bottom: 'bottom'
      //     }
      //   },
      //   position: {
      //     options: echarts.util.reduce(posList, function (map, pos) {
      //       map[pos] = pos
      //       return map
      //     }, {})
      //   },
      //   distance: {
      //     min: 0,
      //     max: 100
      //   }
      // }
      //
      // app.config = {
      //   rotate: 90,
      //   align: 'left',
      //   verticalAlign: 'middle',
      //   position: 'insideBottom',
      //   distance: 15,
      //   onChange: function () {
      //     let labelOption = {
      //       normal: {
      //         rotate: app.config.rotate,
      //         align: app.config.align,
      //         verticalAlign: app.config.verticalAlign,
      //         position: app.config.position,
      //         distance: app.config.distance
      //       }
      //     }
      //     myChart.setOption({
      //       series: [{
      //         label: labelOption
      //       }, {
      //         label: labelOption
      //       }, {
      //         label: labelOption
      //       }, {
      //         label: labelOption
      //       }]
      //     })
      //   }
      // }
      //
      // let labelOption = {
      //   show: true,
      //   position: app.config.position,
      //   distance: app.config.distance,
      //   align: app.config.align,
      //   verticalAlign: app.config.verticalAlign,
      //   rotate: app.config.rotate,
      //   formatter: '{c}  {name|{a}}',
      //   fontSize: 16,
      //   rich: {
      //     name: {
      //       textBorderColor: '#fff'
      //     }
      //   }
      // }
      //
      // let option = {
      //   color: ['#003366', '#006699', '#4cabce', '#e5323e'],
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow'
      //     }
      //   },
      //   grid: {
      //     left: '10%',
      //     right: '10%',
      //     bottom: '0',
      //     top: '20%',
      //     containLabel: true
      //   },
      //   legend: {
      //     data: ['确诊人员总数', '确诊病例感染者', '无症状感染者'],
      //     top: '40',
      //     textStyle: {
      //       fontSize: 14
      //     }
      //   },
      //   xAxis: [
      //     {
      //       type: 'category',
      //       axisTick: { show: false },
      //       axisLabel: {
      //         show: true,
      //         textStyle: {
      //           fontSize: 14
      //         }
      //       },
      //       data: ['和平区', '沈河区', '铁西区', '皇姑区', '大东区', '浑南区', '于洪区', '沈北新区', '苏家屯区', '辽中区', '新民市', '法库县', '康平县']
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value'
      //     }
      //   ],
      //   series: [
      //     {
      //       name: '确诊人员总数',
      //       type: 'bar',
      //       barGap: 0,
      //       label: labelOption,
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      //     },
      //     {
      //       name: '确诊病例感染者',
      //       type: 'bar',
      //       label: labelOption,
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      //     },
      //     {
      //       name: '无症状感染者',
      //       type: 'bar',
      //       label: labelOption,
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      //     }
      //   ]
      // }
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['确诊人员总数', '确诊病例', '无症状感染者'],
          bottom: '40',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['浑南区', '大东区', '皇姑区', '铁西区', '沈河区', '和平区', '市本级']

        },
        series: [
          {
            name: '确诊人员总数',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              formatter: '{a}:{c}'
            },
            color: '#37a2da',
            data: chart1List1
          },
          {
            name: '确诊病例',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              formatter: '{a}:{c}'
            },
            color: '#9fe6b8',
            // data: ['浑南区', '大东区', '皇姑区', '铁西区', '沈河区', '和平区']
            data: chart1List2
          },
          {
            name: '无症状感染者',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              formatter: '{a}:{c}'
            },
            color: '#ff9f7f',
            data: chart1List3
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
      let _this = this
      myChart.on('click', function (params) {
        console.log(params.name)
        if (params.name === '市直') {
          params.name = ''
        }
        _this.$router.push({
          name: 'statConfirmedAsymptomatic',
          query: { areaName: params.name }
        })
      })
    },
    chart2 (chart2List1, chart2List2, chart2List3) {
      let myChart = echarts.init(document.getElementById('chart2'))
      // 指定图表的配置项和数据

      // let posList = [
      //   'left', 'right', 'top', 'bottom',
      //   'inside',
      //   'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
      //   'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      // ]
      //
      // app.configParameters = {
      //   rotate: {
      //     min: -90,
      //     max: 90
      //   },
      //   align: {
      //     options: {
      //       left: 'left',
      //       center: 'center',
      //       right: 'right'
      //     }
      //   },
      //   verticalAlign: {
      //     options: {
      //       top: 'top',
      //       middle: 'middle',
      //       bottom: 'bottom'
      //     }
      //   },
      //   position: {
      //     options: echarts.util.reduce(posList, function (map, pos) {
      //       map[pos] = pos
      //       return map
      //     }, {})
      //   },
      //   distance: {
      //     min: 0,
      //     max: 100
      //   }
      // }
      //
      // app.config = {
      //   rotate: 90,
      //   align: 'left',
      //   verticalAlign: 'middle',
      //   position: 'insideBottom',
      //   distance: 15,
      //   onChange: function () {
      //     let labelOption = {
      //       normal: {
      //         rotate: app.config.rotate,
      //         align: app.config.align,
      //         verticalAlign: app.config.verticalAlign,
      //         position: app.config.position,
      //         distance: app.config.distance
      //       }
      //     }
      //     myChart.setOption({
      //       series: [{
      //         label: labelOption
      //       }, {
      //         label: labelOption
      //       }, {
      //         label: labelOption
      //       }, {
      //         label: labelOption
      //       }]
      //     })
      //   }
      // }
      //
      // let labelOption = {
      //   show: true,
      //   position: app.config.position,
      //   distance: app.config.distance,
      //   align: app.config.align,
      //   verticalAlign: app.config.verticalAlign,
      //   rotate: app.config.rotate,
      //   formatter: '{c}  {name|{a}}',
      //   fontSize: 16,
      //   rich: {
      //     name: {
      //       textBorderColor: '#fff'
      //     }
      //   }
      // }
      //
      // let option = {
      //   color: ['#003366', '#006699', '#4cabce', '#e5323e'],
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow'
      //     }
      //   },
      //   grid: {
      //     left: '10%',
      //     right: '10%',
      //     bottom: '0',
      //     top: '20%',
      //     containLabel: true
      //   },
      //   legend: {
      //     data: ['确诊人员总数', '确诊病例', '无症状感染者'],
      //     top: '40',
      //     textStyle: {
      //       fontSize: 14
      //     }
      //   },
      //   xAxis: [
      //     {
      //       type: 'category',
      //       axisTick: { show: false },
      //       axisLabel: {
      //         show: true,
      //         textStyle: {
      //           fontSize: 14
      //         }
      //       },
      //       data: ['和平区', '沈河区', '铁西区', '皇姑区', '大东区', '浑南区', '于洪区', '沈北新区', '苏家屯区', '辽中区', '新民市', '法库县', '康平县']
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value'
      //     }
      //   ],
      //   series: [
      //     {
      //       name: '确诊人员总数',
      //       type: 'bar',
      //       barGap: 0,
      //       label: labelOption,
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      //     },
      //     {
      //       name: '确诊病例感染者',
      //       type: 'bar',
      //       label: labelOption,
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      //     },
      //     {
      //       name: '无症状感染者',
      //       type: 'bar',
      //       label: labelOption,
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      //     }
      //   ]
      // }
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['确诊人员总数', '确诊病例', '无症状感染者'],
          bottom: '40',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          max: 12,
          splitNumber: 6
        },
        yAxis: {
          type: 'category',
          data: ['康平县', '法库县', '新民市', '辽中区', '苏家屯区', '沈北新区', '于洪区']

        },
        series: [
          {
            name: '确诊人员总数',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              formatter: '{a}:{c}'
            },
            color: '#37a2da',
            data: chart2List1
          },
          {
            name: '确诊病例',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              formatter: '{a}:{c}'
            },
            color: '#9fe6b8',
            data: chart2List2
          },
          {
            name: '无症状感染者',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              formatter: '{a}:{c}'
            },
            color: '#ff9f7f',
            data: chart2List3
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
      let _this = this
      myChart.on('click', function (params) {
        console.log(params.name)
        if (params.name === '市直') {
          params.name = ''
        }
        _this.$router.push({
          name: 'statConfirmedAsymptomatic',
          query: { areaName: params.name }
        })
      })
    },
    search (value) {
      this.pageObj.pageNo = 1
      this.init(value)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        // place_type: this.$common.xeUtils.trim(this.searchObj.place_type),
        ...data
      }
      this.tableLoading = true
      getAsymptomaticCountList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let chart1List1 = []
          let chart1List2 = []
          let chart1List3 = []
          let chart2List1 = []
          let chart2List2 = []
          let chart2List3 = []
          let data1 = [{ name: '浑南区' }, { name: '大东区' }, { name: '皇姑区' }, { name: '铁西区' }, { name: '沈河区' }, { name: '和平区' }, { name: '市本级' }]
          let data2 = [{ name: '康平县' }, { name: '法库县' }, { name: '新民市' }, { name: '辽中区' }, { name: '苏家屯区' }, { name: '沈北新区' }, { name: '于洪区' }]
          let data3 = [
            {
              name: '康平县',
              num: 0,
              wzz: 0,
              qz: 0
            },
            {
              name: '法库县',
              num: 0,
              wzz: 0,
              qz: 0
            },
            {
              name: '新民市',
              num: 0,
              wzz: 0,
              qz: 0
            },
            {
              name: '辽中区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '苏家屯区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '沈北新区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '于洪区',
              num: 0,
              wzz: 0,
              qz: 0
            },
            {
              name: '浑南区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '大东区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '皇姑区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '铁西区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '沈河区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '和平区',
              num: 0,
              wzz: 0,
              qz: 0
            }, {
              name: '市本级',
              num: 0,
              wzz: 0,
              qz: 0
            }]
          let dataList = data.data
          for (let j = 0; j < data3.length; j++) {
            for (let i = 0; i < dataList.length; i++) {
              if (dataList[i].county === data3[j].name) {
                data3[j].num = dataList[i].num
                data3[j].wzz = dataList[i].wzz
                data3[j].qz = dataList[i].qz
              }
            }
          }
          console.log(data3, 'data3data3')
          for (let j = 0; j < data1.length; j++) {
            for (let i = 0; i < data3.length; i++) {
              if (data3[i].name === data1[j].name) {
                chart1List1.push(data3[i].num)
                chart1List2.push(data3[i].qz)
                chart1List3.push(data3[i].wzz)
              }
            }
          }
          for (let j = 0; j < data2.length; j++) {
            for (let i = 0; i < data3.length; i++) {
              if (data3[i].name === data2[j].name) {
                chart2List1.push(data3[i].num)
                chart2List2.push(data3[i].qz)
                chart2List3.push(data3[i].wzz)
              }
            }
          }
          this.chart1(chart1List1, chart1List2, chart1List3)
          this.chart2(chart2List1, chart2List2, chart2List3)
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          // for (let i = 0; i < data.data.results.length; i++) {
          // data.data.results[i].samplingDate = this.getDate(data.data.results[i].sampling_date)
          // data.data.results[i].imp_date = this.getDate(data.data.results[i].imp_date)
          // }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    },
    // 获取类型
    getType (value) {
      if (value.type) {
        this.$router.push({
          name: 'statConfirmedAsymptomatic',
          query: { type: value.type }
        })
      } else {
        this.$router.push({ name: 'statConfirmedAsymptomatic' })
      }
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .report-content {
        padding: 0 10px;
        height: auto;
    }
    .county-group {
        display: flex;
        align-items: center;
    }
    .search-group {
        /*padding: 10px 0;*/
        /*border-bottom: 1px solid #efefef;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .ivu-col.ivu-col-span-6{
        width: 20%;
    }
    .record-num {
        margin-right: 140px;
    }
    .main-table {
        margin-top: -45px;
    }
    .tt {
        display: flex;
        align-items: center;
        padding-top: 10px;
    }
    .chart-item{
        width: 100%;
        height: 1000px;
    }
</style>
